<template>
  <!-- <n-empty description="世界领域-建设中" class="--empty-ptb-40">
    <template #icon>
      <n-icon :size="40" color="#909399">
        <IconMyCom />
      </n-icon>
    </template>
  </n-empty> -->
  <el-card class="el-card-d" shadow="always">
            <div class="infinite-list-wrapper" style="overflow:auto;">
                <el-timeline
                  infinite-scroll-disabled="disabled">
                <div v-if="allmessages.length>0"> 
                  <el-timeline-item v-for="(item,index) in allmessages"  :key="index" :timestamp='item.createTime' placement="top">
                    <div v-if="item.ip == 'AI'"> 
                      <el-card class="el-card-m" style="height:120px">
                      <h4 class="ai_h wg">【CL&AI】</h4>
                      <p class="ai_h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.content}}</p>
                    </el-card>
                    </div>
                    <div v-else>
                      <el-card class="el-card-m" style="height:120px">
                      <h4>{{item.ipInfo}}：</h4>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.content}}</p>
                    </el-card>
                    </div>
                  
                  </el-timeline-item>
                </div>
                <div v-else>
                   <el-timeline-item placement="top">
                    <el-card class="el-card-m" style="height:120px">
                      <h4>包子：</h4>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 说点什么吧😁</p>
                    </el-card>
                  </el-timeline-item>
                </div>
              </el-timeline> 
            </div>
            <div class="el-card-messages">
                 <el-input type="textarea" :rows="5" placeholder="输入留言，请友好参与AI互动（尝试驯服...）" maxlength="200" v-model="message" :disabled="btnChangeEnable"></el-input>
                 <el-button type="info" round class="submit-message" @click="submitMessage" :disabled="btnChangeEnable">留言</el-button>
            </div>
  </el-card>

</template>

<script lang='ts'>
import { defineComponent, ref, onMounted,reactive,toRefs } from 'vue'
import { useMessage } from 'naive-ui'
import { IconMyCom } from '@/icons'
import { messageList,saveMessageBoard } from '@/api/user'
import { resolveSoa } from 'dns'
import { r } from '../../../website/assets/vendor.b456fd90'

export default defineComponent({
  name: 'MyCom',
  components: {
    IconMyCom,
  },
  setup() {
   const nMessage = useMessage()
  //  const allmessages =  reactive([])
   const state = reactive({
     message: '',
     allmessages:[]
    })
    const btnChangeEnable = ref(false)

  //  const allmessages = 
  //  [
  //   {
  //     createTime:"2022-06-20 14:22:35",
  //     memberName:"【IP 属地河南】-访客",
  //     content:"干"
  //   },
  //   {
  //     createTime:"2022-06-20 14:22:36",
  //     memberName:"【IP 属地河南】-访客",
  //     content:"干"
  //   }
  //  ];
    // onMounted(() => {
    //   nMessage.warning('建设中。。。')
    // })
    onMounted(async () => {
      messageLists();
    })

    const messageLists = () => {
       const pageNO = 1
       const pageSize = 40
       messageList(pageNO,pageSize).then(res=>{ 
          // res.data.data.dataList.forEach(e => {
          //        allmessages.push(e);
          // });
          // console.log(res.data.data.dataList)
          state.allmessages = res.data.data.dataList;
      });
    }
    const submitMessage = () => {
       const content = state.message;
       btnChangeEnable.value = true;
       if(content.length == 0){
          nMessage.warning('总得来点什么吧');
          return;
       }
       state.message = "世界消息发布中... 请留意";
       saveMessageBoard(content).then(res=>{
        // console.log(res.data.success)
        if(res.data.success){
          nMessage.success('世界消息发布中，【CL&AI】AI模型正在回应...')
          state.message = "";
          messageLists();
          btnChangeEnable.value = false;
        }else{
          nMessage.warning(res.data.msg)
          btnChangeEnable.value = false;
        }
       });
    }

     return {
       ...toRefs(state),
      // allmessages,
      submitMessage,
      btnChangeEnable
    }
  },
})
</script>
<style scoped>
.infinite-list-wrapper{
      width: 100%;
      height: 500px;
    }
    .submit-message{
        width: 100%; 
        background: rgb(235, 245, 247);
        color: cadetblue;
        letter-spacing:20px;
    }
 @media screen and (max-width: 3000px) and (min-width: 767px) {
    .el-card-d{
      float: left;
      margin-top: 20px;
      margin-left: 10%; 
      width: 80%;
      height: 90%;
    }

   }
  /*
  屏幕小于768px的
  */
  @media screen and (max-width:768px) and (min-width: 100px){  
     .el-card-d{

      width: 100%;
      height: 100%;
    }
  }
  .ai_h{
    text-align: right;
  }

  .wg {
    background-image: -webkit-linear-gradient(left, #e30f0f, #E6D205 25%, #f08080 50%, #E6D205 75%, #f08080);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;

}
  @-webkit-keyframes masked-animation {
      0% {
          background-position: 0 0;
      }
      100% {
          background-position: -100% 0;
      }
  }

</style>